<template>
    <el-form :model="tableData" ref="ruleFormRef">
        <el-table ref="multipleTableRef" class="multiple-table" :data="tableData.tableList" max-height="400">
            <el-table-column property="fieldName" label="字段名" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.fieldName'">
                        <el-input v-model="scope.row.fieldName" clearable placeholder="请输入按钮名称"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="rules" label="规则" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.rules'">
                        <el-select v-model="scope.row.rules" clearable placeholder="选择或者输入中文名" disabled>
                            <el-option key="inline" label="行内" value="inline" />
                            <el-option key="top" label="顶部" value="top" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column property="values" label="值" width="300">
                <template #default="scope">
                    <el-form-item :prop="'tableList.' + scope.$index + '.values'">
                        <el-select v-model="scope.row.values" clearable placeholder="选择或者输入中文名" disabled>
                            <el-option key="translate" label="修改" value="translate" />
                            <el-option key="add" label="新增" value="add" />
                            <el-option key="details" label="详情" value="details" />
                            <el-option key="import" label="导入" value="import" />
                            <el-option key="export" label="导出" value="export" />
                            <el-option key="download" label="下载模板" value="download" />
                            <el-option key="delete" label="删除" value="delete" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope"><el-button type="primary" link class="is-link-i"
                        @click="handleRemoveItem(scope)">删除</el-button></template>
            </el-table-column>
            <template #empty v-if="tableData.tableList.length === 0"><el-empty description="无数据"></el-empty></template>
        </el-table>
        
    </el-form>

    <div style="margin-top: 15px;"><el-button type="info" size="small" :icon="Plus"
            @click="handleAddItem">新增一行</el-button>
    </div>

    <!-- <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
    </el-button> -->
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const ruleFormRef = ref()
const multipleTableRef = ref()

const tableData = ref({
    tableList: []
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(tableData.value.tableList);
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleAddItem = () => {
    tableData.value.tableList.push({
        fieldName: '删除',
        rules: '行内',
        values: '删除',
        isShowPC: true,
    });
}

const handleRemoveItem = (scope) => {
    const index = tableData.value.tableList.indexOf(scope.row);
    if (index !== -1) {
        tableData.value.tableList.splice(index, 1);
    }
}
</script>

<style lang="less" scoped>
@import "./index.css";
</style>